<template>
  <div class="bar-v">
    <div ref="barV"></div>
  </div>
</template>

<script lang="ts">
import { onMounted, getCurrentInstance, ref, defineComponent } from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
  name: 'AnaBarV',
  props: {
    type: {
      required: true,
      type: String,
    },
    options: {
      required: true,
      type: Array,
    },
    values: {
      required: true,
      type: Array,
    },
    number: {
      required: true,
      type: Number,
    },
    options2: {
      type: Array,
      default: [],
    },
    data: {
      type: Array,
      default: [],
    },
  },
  setup(props) {
    const colors = [
      '#a4e0f7',
      '#fbda89',
      '#F08080',
      '#90EE90',
      '#C0C0C0',
      '#4169E1',
      '#FDF5E6',
      '#FF8C00',
    ];
    onMounted(() => {
      init();
    });
    const { proxy } = getCurrentInstance() as any;
    const barV = ref(null);
    const init = () => {
      const myChart = proxy.$echarts.init(proxy.$refs.barV);
      let option: any = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '2%',
          right: '10%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            name: '选项',
            data: props.options,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(0,0,0)',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '百分比',
            min: 0,
            max: 100,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(0,0,0)',
              },
            },
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
      };
      if (props.type == 'x') {
        let array1 = [];
        for (let i = 0; i < props.data.length; i++) {
          let array2 = [];
          for (let j = 0; j < (props.data[i] as any).length; j++) {
            array2.push(((props.data[i][j] / props.number) * 100).toFixed(2));
          }
          array1.push(array2);
        }
        option.legend = {
          data: props.options2,
        };
        option.series = [];
        for (var i = 0; i < props.options2.length; i++) {
          option.series.push({
            name: props.options2[i],
            type: 'bar',
            // stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: array1[i],
          });
        }
      } else {
        option.series = [
          {
            type: 'bar',
            // stack: '总量',
            areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            data: props.values.map((ele: any) => {
              return ((ele / props.number) * 100).toFixed(2);
            }),
          },
        ];
      }
      // if (props.type == 'x') {
      //   option.legend = {
      //     data: props.options2,
      //   };
      //   option.series = [];
      //   for (var i = 0; i < props.options2.length; i++) {
      //     option.series.push({
      //       name: props.options2[i],
      //       type: 'bar',
      //       // stack: '总量',
      //       areaStyle: {},
      //       emphasis: {
      //         focus: 'series',
      //       },
      //       data: props.data[i],
      //     });
      //   }
      // } else {
      //   option.series = [
      //     {
      //       type: 'bar',
      //       // stack: '总量',
      //       areaStyle: {},
      //       emphasis: {
      //         focus: 'series',
      //       },
      //       data: props.values.map((ele: any) => {
      //         return (ele / props.number) * 100;
      //       }),
      //     },
      //   ];
      // }
      option && myChart.setOption(option);
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    };
  },
});
</script>

<style scoped lang="scss">
.bar-v {
  height: 50vh;
  width: 50vw;
  div {
    height: 50vh;
    width: 50vw;
  }
}
</style>
